import { Card, Col, Flex, Radio, Row, Spin } from "antd";
import ItemCard from "@/components/ItemCard";
import { useRequest } from "ahooks";
import { fetchPostsList } from "@/services/posts/posts";
import { useEffect, useState } from "react";
import { useNavigate } from "umi";

export default function PostsList() {

  const [data, setData] = useState([])
  const navigate = useNavigate()

  const {loading, run} = useRequest(fetchPostsList, {
    manual: true,
    onSuccess: (data) => {
      const lists = data?.data?.map((item: any) => {
        return {
          id: item.id,
          title: item.title,
          content: item.content,
          author: item?.author?.username,
          nickname: item?.author?.nick_name,
          avatar: item?.author?.avatar,
          pic: item?.pic
        }
      })
      if (lists) setData(lists)
    }
  })

  const handleClickItem = (item: any) => {
    navigate("/post/detail?id=" + item?.id)
  }

  useEffect(() => {
    run()
  }, [])

  return (<>
    
    <Card
      title={
        <Flex justify="center" align="center" gap={16}>
          <Radio.Group onChange={()=>{}} defaultValue="a">
            <Radio.Button value="latest">最新更新</Radio.Button>
            <Radio.Button value="recentRead">最近查看</Radio.Button>
            {/* 管理员权限检查 */}
            {/* <Radio.Button value="c">更新中</Radio.Button> */}  
            <Radio.Button value="recommond">推荐</Radio.Button>
          </Radio.Group>
        </Flex>
      }
    >
      {
        loading ? <Spin fullscreen></Spin> : <Row gutter={[16, 16]}>
        {data?.map((item, idx) => {
          return <Col xs={24} sm={12} md={8} lg={6} xl={6} key={idx}>
            <ItemCard {...item} onClick={() => {
              handleClickItem(item)
            }}></ItemCard>
        </Col>
        })}
      </Row>
      
      }
      
    </Card>
  </>)
}